<script setup>
// #region 引入包, 函数和组件
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const props = defineProps(["tabsName"]);
const route = useRoute();
const router = useRouter();
// #endregion

// #region // 变量
const tabs = ref([]); // 点击过的路由
const keys = Object.keys(props.tabsName);
// #endregion

// #region // 函数
const close = (item, index) => {
  // 不是选中的
  if (route.name !== item) {
    tabs.value.splice(index, 1);
  } else {
    // 不是最后一项
    if (index !== tabs.value.length - 1) {
      tabs.value.splice(index, 1);
      router.replace({ name: tabs.value[index] });
      // console.log(tabs.value);
    } else {
      // 是最后一项
      if (tabs.value.length === 1) {
        // 最后一个
        // console.log(111);
        router.replace({ path: "/login" });
        // 删除登录信息
        localStorage.removeItem('token')
        return;
      }
      tabs.value.splice(index, 1);
      router.replace({ name: tabs.value[index - 1] });
    }
  }
};
// #endregion

// #region // 生命周期和vue函数
watch(
  () => route.name,
  (newVal) => {
    // console.log(keys, newVal);
    if (keys.some((v) => v === newVal) && tabs.value.every((v) => v !== newVal)) {
      tabs.value.push(newVal);
      // console.log(tabs.value);
    }
  },
  { immediate: true }
);
// #endregion
</script>

<template>
  <div class="switch">
    <router-link v-for="(item, index) in tabs" :to="'/admin/' + item"
      >{{ tabsName[item] }} <i @click.stop.prevent="close(item, index)">&times;</i></router-link
    >
  </div>
</template>

<style lang="scss" scoped>
.switch {
  flex: 1;
  display: flex;
  border-bottom: 1px solid #e6e6ea;
  padding-top: 7px;
  a {
    background: #fff;
    height: 30px;
    border-radius: 4px;
    font-size: 14px;
    padding: 0 15px;
    margin: 0 5px;
    line-height: 30px;
    color: #333;
    i {
      font-size: 12px;
      color: #666;
    }
  }
  .router-link-active {
    background: #f0f2f6;
  }
}
</style>
